<template>
	<div class="library_member_move">
		<p>选择库角色</p>
		<el-select size="medium" v-model="checkedRole" placeholder="选择库角色" :popper-append-to-body="false">
			<el-option v-for="(item, index) in roleOptions" :key="index" :label="item.name" :value="item.id"></el-option>
		</el-select>
	</div>
</template>

<script>
import { getLibraryRoleList } from '@/api/data/tbNetRole';
export default {
	props: {
		value: { type: String, default: '' },
		roleId: { type: String, default: '' },
		libraryId: { type: String, default: '' }
	},
	data() {
		return {
			checkedRole: this.value,
			roleOptions: []
		};
	},
	watch: {
		value(val) {
			this.checkedRole = val;
		},
		checkedRole(val) {
			this.$emit('input', val);
		},
		roleId: {
			handler() {
				this.checkedRole = '';
				this.getLibraryRoleData();
			},
			immediate: true
		}
	},
	methods: {
		async getLibraryRoleData() {
			let params = { dirId: this.libraryId };
			let result = await getLibraryRoleList(params).then((res) => res.data);
			if (result.code === '0') {
				let datas = result.data || [];
				this.roleOptions = datas.filter((n) => n.id !== this.roleId);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.library_member_move {
	p {
		margin-bottom: 6px;
	}
	.el-select {
		width: 100%;
	}
}
</style>
